<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link href="css/7.css" rel="stylesheet" type="text/css">
    <link href="css/skin/skin_0.css" rel="stylesheet" type="text/css" id="cssfile">
    <script type="text/javascript" src="js/jquery-3.1.0.js"></script>
    <!--[if IE]>
      <script type="text/javascript" src="js/jquery.js"></script> 
    <![endif] -->
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/7.js"></script>
  </head>
  <body>
    <div id="wrapper">
      <div id="header" class="clearfix">
        <div class="contWidth" class="clearfix">
          <a href="#logo" class="logo">
            <img src="images/logo.gif" alt="Jane Shop">
          </a>

          <div class="search">
            <input type="text" id="inputSearch" name="inputSearch" value="输入商品名称">
          </div>

          <ul id="skin">
            <li id="skin_0" title="蓝色" class="selected">蓝色</li>
            <li id="skin_1" title="紫色">紫色</li>
            <li id="skin_2" title="红色">红色</li>
            <li id="skin_3" title="天蓝色">天蓝色</li>
            <li id="skin_4" title="橙色">橙色</li>
            <li id="skin_5" title="淡绿色">淡绿色</li>
          </ul>

          <div class="mainNav">
            <ul class="nav">
              <li><a href="#">首页</a></li>
              <li><a href="#">品牌</a>
                <div class="jnNav">
                  <div class="subitem">
                    <dl class="fore">
                      <dt>
                        <a href="#nogo">品牌：</a>
                      </dt>
                      <dd>
                        <em ><a href="#nogo">耐克</a></em>
                        <em ><a href="#nogo">阿迪达斯</a></em>
                        <em ><a href="#nogo">达芙妮</a></em>
                        <em ><a href="#nogo">李宁</a></em>
                        <em ><a href="#nogo">安踏</a></em>
                        <em ><a href="#nogo">奥康</a></em>
                        <em ><a href="#nogo">骆驼</a></em>
                        <em ><a href="#nogo">特步</a></em>
                        <em ><a href="#nogo">耐克</a></em>
                        <em ><a href="#nogo">阿迪达斯</a></em>
                        <em ><a href="#nogo">达芙妮</a></em>
                        <em ><a href="#nogo">李宁</a></em>
                        <em class="noborder"><a href="#nogo">特步</a></em>
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        <a href="#nogo">品牌：</a>
                      </dt>
                      <dd>
                        <em ><a href="#nogo">耐克</a></em>
                        <em ><a href="#nogo">阿迪达斯</a></em>
                        <em ><a href="#nogo">达芙妮</a></em>
                        <em ><a href="#nogo">李宁</a></em>
                        <em ><a href="#nogo">安踏</a></em>
                        <em ><a href="#nogo">奥康</a></em>
                        <em ><a href="#nogo">骆驼</a></em>
                        <em ><a href="#nogo">特步</a></em>
                        <em ><a href="#nogo">耐克</a></em>
                        <em ><a href="#nogo">阿迪达斯</a></em>
                        <em ><a href="#nogo">达芙妮</a></em>
                        <em ><a href="#nogo">李宁</a></em>
                        <em class="noborder"><a href="#nogo">特步</a></em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </li>
              <li><a href="#">女装</a>
                <div class="jnNav">
                  <div class="subitem">
                    <dl class="fore">
                      <dt>
                        <a href="#nogo">女装：</a>
                      </dt>
                      <dd>
                        <em ><a href="#nogo">耐克</a></em>
                        <em ><a href="#nogo">阿迪达斯</a></em>
                        <em ><a href="#nogo">达芙妮</a></em>
                        <em ><a href="#nogo">李宁</a></em>
                        <em ><a href="#nogo">安踏</a></em>
                        <em ><a href="#nogo">奥康</a></em>
                        <em ><a href="#nogo">骆驼</a></em>
                        <em ><a href="#nogo">特步</a></em>
                        <em ><a href="#nogo">耐克</a></em>
                        <em ><a href="#nogo">阿迪达斯</a></em>
                        <em ><a href="#nogo">达芙妮</a></em>
                        <em ><a href="#nogo">李宁</a></em>
                        <em class="noborder"><a href="#nogo">特步</a></em>
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        <a href="#nogo">女装：</a>
                      </dt>
                      <dd>
                        <em ><a href="#nogo">耐克</a></em>
                        <em ><a href="#nogo">阿迪达斯</a></em>
                        <em ><a href="#nogo">达芙妮</a></em>
                        <em ><a href="#nogo">李宁</a></em>
                        <em ><a href="#nogo">安踏</a></em>
                        <em ><a href="#nogo">奥康</a></em>
                        <em ><a href="#nogo">骆驼</a></em>
                        <em ><a href="#nogo">特步</a></em>
                        <em ><a href="#nogo">耐克</a></em>
                        <em ><a href="#nogo">阿迪达斯</a></em>
                        <em ><a href="#nogo">达芙妮</a></em>
                        <em ><a href="#nogo">李宁</a></em>
                        <em class="noborder"><a href="#nogo">特步</a></em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </li>
              <li><a href="#">男装</a>
                <div class="jnNav">
                  <div class="subitem">
                    <dl class="fore">
                      <dt>
                        <a href="#nogo">男装：</a>
                      </dt>
                      <dd>
                        <em ><a href="#nogo">耐克</a></em>
                        <em ><a href="#nogo">阿迪达斯</a></em>
                        <em ><a href="#nogo">达芙妮</a></em>
                        <em ><a href="#nogo">李宁</a></em>
                        <em ><a href="#nogo">安踏</a></em>
                        <em ><a href="#nogo">奥康</a></em>
                        <em ><a href="#nogo">骆驼</a></em>
                        <em ><a href="#nogo">特步</a></em>
                        <em ><a href="#nogo">耐克</a></em>
                        <em ><a href="#nogo">阿迪达斯</a></em>
                        <em ><a href="#nogo">达芙妮</a></em>
                        <em ><a href="#nogo">李宁</a></em>
                        <em class="noborder"><a href="#nogo">特步</a></em>
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        <a href="#nogo">男装：</a>
                      </dt>
                      <dd>
                        <em ><a href="#nogo">耐克</a></em>
                        <em ><a href="#nogo">阿迪达斯</a></em>
                        <em ><a href="#nogo">达芙妮</a></em>
                        <em ><a href="#nogo">李宁</a></em>
                        <em ><a href="#nogo">安踏</a></em>
                        <em ><a href="#nogo">奥康</a></em>
                        <em ><a href="#nogo">骆驼</a></em>
                        <em ><a href="#nogo">特步</a></em>
                        <em ><a href="#nogo">耐克</a></em>
                        <em ><a href="#nogo">阿迪达斯</a></em>
                        <em ><a href="#nogo">达芙妮</a></em>
                        <em ><a href="#nogo">李宁</a></em>
                        <em class="noborder"><a href="#nogo">特步</a></em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </li>
              <li><a href="#">鞋包配饰</a></li>
            </ul>
          </div>
        </div>

      </div><!-- header结束 -->
        
      <div id="content">
        <div class="janeshop">
          <div class="jnCatalog">
            <h2>商品分类</h2>
            <div class="jnCatainfo">
              <h3>推荐品牌</h3>
              <ul>
                <li><a href="#nogo" >耐克</a></li>
                <li><a href="#nogo" class="promoted">阿迪达斯</a></li>
                <li><a href="#nogo" >达芙妮</a></li>
                <li><a href="#nogo" >李宁</a></li>
                <li><a href="#nogo" >安踏</a></li>
                <li><a href="#nogo" >奥康</a></li>
                <li><a href="#nogo" class="promoted">骆驼</a></li>
                <li><a href="#nogo" >特步</a></li>
              </ul>

              <h3>女装</h3>
              <ul>
                <li><a href="#nogo" >呢大衣</a></li>
                <li><a href="#nogo" >T恤</a></li>
                <li><a href="#nogo" >羽绒</a></li>
                <li><a href="#nogo" >衬衫</a></li>
                <li><a href="#nogo" >羊绒衫</a></li>
                <li><a href="#nogo" >针织</a></li>
                <li><a href="#nogo" >连衣裙</a></li>
                <li><a href="#nogo" >皮外套</a></li>
              </ul>

              <h3>男装</h3>
              <ul>
                <li><a href="#nogo" >衬衫</a></li>
                <li><a href="#nogo" >T恤衫</a></li>
                <li><a href="#nogo" >夹克</a></li>
                <li><a href="#nogo" >大皮衣</a></li>
                <li><a href="#nogo" >风衣</a></li>
                <li><a href="#nogo" >牛仔裤</a></li>
                <li><a href="#nogo" >西服</a></li>
                <li><a href="#nogo" >卫衣</a></li>
              </ul>

              <h3>鞋包配饰</h3>
              <ul>
                <li><a href="#nogo" >围巾</a></li>
                <li><a href="#nogo" >旅行箱</a></li>
                <li><a href="#nogo" >真皮包</a></li>
                <li><a href="#nogo" >韩版</a></li>
                <li><a href="#nogo" >达芙妮</a></li>
                <li><a href="#nogo" >单肩包</a></li>
                <li><a href="#nogo" >毛线</a></li>
                <li><a href="#nogo" >清仓靴子</a></li>
              </ul>
            </div>
          </div><!-- jnCatalog结束 -->

          <!-- 大屏广告 -->
          <div class="jnImageroll" class="clearfix">
            <a href="#logo" id="JS_imgWrap">
              <img src="images/ads/2.jpg" alt="相约情人节"/>
              <img src="images/ads/1.jpg" alt="新款上线"/>
              <img src="images/ads/3.jpg" alt="愤怒小鸟特卖"/>
              <img src="images/ads/4.jpg" alt="男鞋促销第一波"/>
              <img src="images/ads/5.jpg" alt="春季新品发布"/>    
            </a>
            <div>
              <a href="###1"><em>相约情人节</em><em>全场119元起</em></a>
              <a href="###2"><em>新款上线</em><em>全场357元起</em></a>
              <a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a>
              <a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a>
              <a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a>
            </div>
          </div><!-- jnImageroll结束 -->


          <div class="jnNotice" class="clearfix">
            <div class="jnMiaosha">
              <a href="#logo" class="JS_css3">
                <img src="images/upload/20120216.jpg" alt="冬品清仓">
              </a>  
            </div>

            <div class="jnNoticeInfo">
              <h2 title="最新动态">最新动态</h2>
              <ul>
                <li><a href="###1" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li>
                <li><a href="###2" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li>
                <li><a href="###3" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li>
                <li><a href="###4" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li>
                <li><a href="###5" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li>
                <li><a href="###6" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li>
              </ul>
            </div>
          </div><!-- jnNotice结束 -->  


          <div class="jnBrand">
            <div class="jnBrandTab">
              <h2>品牌活动</h2>  
              <ul>
                <li><a title="运动" href="#nogo">运动</a></li>
                <li><a title="女鞋" href="#nogo">女鞋</a></li>
                <li><a title="男鞋" href="#nogo">男鞋</a></li>
                <li><a title="Applife" href="#nogo">童鞋</a></li>
              </ul>
            </div> 

            <div class="jnBrandContent">
              <div class="jnBrandList">
                <ul>
                  <li>
                    <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
                    <span><a href="###1">耐克</a></span>
                  </li>
                  <li>
                    <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
                    <span><a href="###2">阿迪达斯</a></span>
                  </li>
                  <li>
                    <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
                    <span><a href="###3">李宁</a></span>
                  </li>
                  <li>
                    <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
                    <span><a href="###4">安踏</a></span>
                  </li>
                  <li>
                    <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
                    <span><a href="###1">耐克</a></span>
                  </li>
                  <li>
                    <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
                    <span><a href="###2">阿迪达斯</a></span>
                  </li>
                  <li>
                    <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
                    <span><a href="###3">李宁</a></span>
                  </li>
                  <li>
                    <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
                    <span><a href="###4">安踏</a></span>
                  </li>
                  <li>
                    <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
                    <span><a href="###1">耐克</a></span>
                  </li>
                  <li>
                    <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
                    <span><a href="###2">阿迪达斯</a></span>
                  </li>
                  <li>
                    <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
                    <span><a href="###3">李宁</a></span>
                  </li>
                  <li>
                    <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
                    <span><a href="###4">安踏</a></span>
                  </li>
                  <li>
                    <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a>
                    <span><a href="###1">耐克</a></span>
                  </li>
                  <li>
                    <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a>
                    <span><a href="###2">阿迪达斯</a></span>
                  </li>
                  <li>
                    <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a>
                    <span><a href="###3">李宁</a></span>
                  </li>
                  <li>
                    <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a>
                    <span><a href="###4">安踏</a></span>
                  </li>
                </ul>
              </div>
            </div>
            
          </div><!-- jnBrand结束 -->

        </div><!-- janeshop结束 -->

      </div><!-- content结束 -->

      <div id="footer">
        Copyright &copy; 2009 - 2012 JaneShop Inc. 
      </div>
    </div><!-- wrapper结束 -->    
  </body>
</html>